<template>
	<view style="height: 100vh;background: #fff;">
		<scroll-view scroll-y="true" style="background: #fff;">
			<view class="bg-img flex align-center banner" style="height: 440rpx;">
				<view class="flex align-center padding-xl text-white" style="width: 100%;height: 100%;">
					<view :class="'avatar-bg-'+role_id" class="avatar-bg flex align-center justify-center">
						<view v-if="!hasLogin" class="cu-avatar round avatar_unlogin avatar_img" @tap="login"></view>
						<view v-else-if='userInfo.face' class="cu-avatar round avatar_img" :style="'background-image:url('+userInfo.face+');'"></view>
						<!-- <view v-else-if='userInfo.face==null' class="cu-avatar round avatar_defalut avatar_img"></view> -->
					</view>
					<view  style="margin-left:50rpx;height: 110rpx;display: flex;flex-direction: column;justify-content: space-between;">
						<text class="text-xl" style="padding: 0 0rpx;font-weight:500;" v-if="userInfo.nickname">{{userInfo.nickname}}</text>
						<view v-if="role_id">
							<text v-if="role_id===1" class="margin-top-sm round text-white text-sm" style="background-color: rgba(0,0,0,0.5); padding: 6rpx 18rpx;">级别: 妲粉</text>
							<text v-if="role_id===2" class="margin-top-sm round text-white text-sm" style="background-color: rgba(0,0,0,0.5); padding: 6rpx 18rpx;">级别: 店主</text>
							<text v-if="role_id===3" class="margin-top-sm round text-white text-sm" style="background-color: rgba(0,0,0,0.5); padding: 6rpx 18rpx;">级别: 品牌合伙人</text>
							<text v-if="role_id===4" class="margin-top-sm round text-white text-sm" style="background-color: rgba(0,0,0,0.5); padding: 6rpx 18rpx;">级别: 大区市场官</text>
						</view>
					</view>
				</view>
			</view>
			<view class="empty-block"></view>
			<view class="cu-bar bg-white" style="border-bottom: 1px solid #ddd; margin: 0 30rpx;">
				<view class="action text-bold text-lg text-black">我的订单</view>
				<view class="action text-grey" @tap="navTo('/pages/order/order?type=0')">
					<text>全部订单</text>
					<image src='../../static/img/icon_back.png' mode="aspectFit" style="height: 30rpx;width:30rpx;"></image>
				</view>
			</view>
			<view class="cu-list grid col-4 no-border">
				<view class="cu-item">
					<view @tap="navTo('/pages/order/order?type=1')">
						<view class='cu-tag badge' v-if="orderStatus.wait_pay_num>0">{{orderStatus.wait_pay_num}}</view>
						<image src='../../static/img/pending_delivery.png' mode="aspectFit" style="height: 66rpx;width:66rpx;"></image>
						<text>待付款</text>
					</view>
				</view>
				<view class="cu-item">
					<view @tap="navTo('/pages/order/order?type=2')">
						<view class='cu-tag badge' v-if="orderStatus.wait_ship_num>0">{{orderStatus.wait_ship_num}}</view>
					  <image src='../../static/img/pending_payment.png' mode="aspectFit" style="height: 66rpx;width:66rpx;"></image>
					  <text>待发货</text>
					</view>
				</view>
				<view class="cu-item">
					<view @tap="navTo('/pages/order/order?type=3')">
						<view class='cu-tag badge' v-if="orderStatus.wait_rog_num>0">{{orderStatus.wait_rog_num}}</view>
					  <image src='../../static/img/already_shipped.png' mode="aspectFit" style="height: 66rpx;width:66rpx;"></image>
					  <text>已发货</text>
					</view>
				</view>
				<view class="cu-item">
					<view @tap="navTo('/pages/order/order?type=4')">
					  <image src='../../static/img/completed.png' mode="aspectFit" style="height: 66rpx;width:66rpx;"></image>
					  <text>已完成</text>
					</view>
				</view>
			</view>
			<view class="empty-block"></view>
			<view class="cu-bar bg-white" style="margin: 0 30rpx;">
				<view class="action text-bold text-lg text-black">我的服务</view>
			</view>
			<view class="cu-list menu sm-border">
				<view class="cu-item arrow" @tap="navTo('/pages/member/profit/profit')">
					<view class="content">
						<image src="../../static/img/icon_profit.png" class="png margin-left" mode="aspectFit"></image>
						<text class="text-black text-df margin-left-sm">我的收益</text>
					</view>
				</view>
				<view class="cu-item arrow" @tap="navTo('/pages/member/my-team/my-team')">
					<view class="content">
						<image src="../../static/img/icon_team.png" class="png margin-left" mode="aspectFit"></image>
						<text class="text-black text-df margin-left-sm">妲粉团</text>
					</view>
				</view>
				<view class="cu-item arrow" @tap="navTo('/pages/member/address/address')">
					<view class="content">
						<image src="../../static/img/icon_addr.png" class="png margin-left" mode="aspectFit"></image>
						<text class="text-black text-df margin-left-sm">收货地址</text>
					</view>
				</view>
				<view class="cu-item arrow" v-if="role_id===4" @tap="navTo('/pages/member/seller/index')">
					<view class="content">
						<image src="../../static/img/icon_partner.png" class="png margin-left" mode="aspectFit"></image>
						<text class="text-black text-df margin-left-sm">品牌合伙人</text>
					</view>
				</view>
				<view class="cu-item arrow" v-if="role_id===3" @tap="navTo('/pages/member/RegionalManager/index')">
					<view class="content">
						<image src="../../static/img/icon_seller.png" class="png margin-left" mode="aspectFit"></image>
						<text class="text-black text-df margin-left-sm">我的店主</text>
					</view>
				</view>
				<view class="cu-item arrow">
					<button class="content flex align-center"  open-type="contact" bindcontact="handleContact">
						<image src="../../static/img/icon_service.png" class="png margin-left" mode="aspectFit"></image>
						<view class="text-black text-df margin-left-sm">
							<text>我的客服</text>
						</view>
					</button>
				</view>
			</view>
			<view style="height: 50px;"></view>	
		</scroll-view>
	</view>
	
</template>

<script>
	import * as User_API from '@/api/user.js'
	import * as Order_API from '@/api/order.js'
	import {mapMutations} from 'vuex';
	export default {
		data() {
			return {
				userInfo:{},
				role_id:0,
				hasLogin:false,
				orderStatus:{},
				testId:1
			};
		},
		watch:{
			userInfo(newVal){
				this.userInfo = newVal
			},
			role_id(newVal){
				this.role_id = newVal
			}
		},
		onPullDownRefresh() {
			setTimeout(()=> {
				uni.stopPullDownRefresh()
				this.initData();
			}, 200);
		},
		onLoad(e) {
			if(e.shareUser){
				let shop = uni.getStorageSync('shop') || {}
				shop.shareU = e.shareUser
				uni.setStorageSync('shop',shop)
				uni.setStorageSync('shareUser',{'shareU':e.shareUser})
			}
			if(e.shop_name){
				let shop = uni.getStorageSync('shop') || {}
				shop.shop_name = e.shop_name
				uni.setStorageSync('shop',shop)
			}
			if(e.phone){
				uni.setStorageSync('referrer', e.phone)
			}
		},
		onShow() {
			this.initData()
		},
		methods:{
			...mapMutations(['login']),
			// 数据初始化
			async initData() {
				this.role_id = 0
				this.hasLogin = uni.getStorageSync('userInfo').access_token;
			    if (this.hasLogin) {
					this.userInfo = uni.getStorageSync('userInfo')
					this.GET_MemberRole()
					this.GET_OrderStatusNum()
					if(uni.getStorageSync('role')){
						this.role_id = uni.getStorageSync('role').member_role_id
					}
			    }else{
					this.userInfo = {}
					this.role_id = 0
					this.hasLogin = false
				}
			},
			onShareAppMessage() {
				let role_id = uni.getStorageSync('role').id
				let user = uni.getStorageSync('userInfo').nickname
				let phone = uni.getStorageSync('userInfo').mobile
				let shop_name = uni.getStorageSync('shop').shop_name
				let title = ''
				let path = ''
				if(role_id){
					title = user +'的' +shop_name+',快进来看看吧'
					path = '/pages/profile/profile?shareUser='+user+'&shop_name='+shop_name+'&phone='+phone
				}else{
					title = shop_name+'欢迎您的光临'
					path = '/pages/profile/profile'
				}
			    return {
					title: title,
					path: path
			    }
			},
			GET_MemberRole(){
					let shop_id = uni.getStorageSync('shop_id') || 2
					User_API.checkRole({shop_id:shop_id}).then(res =>{
						if(res.member_role_id){
							uni.setStorageSync('role',res)
							this.role_id = res.member_role_id
						}
					})
				// let role = uni.getStorageSync('role')
				// if(!role.member_role_id){
				// 	let shop_id = uni.getStorageSync('shop_id') || 2
				// 	User_API.checkRole({shop_id:shop_id}).then(res =>{
				// 		if(res.member_role_id){
				// 			uni.setStorageSync('role',res)
				// 		}
				// 	})
				// }else{
				// 	let oldRoleId = role.member_role_id 
				// 	let shop_id = uni.getStorageSync('shop_id') || 2
				// 	if(oldRoleId != uni.getStorageSync('role').member_role_id){
				// 		uni.removeStorageSync('role')
				// 		User_API.checkRole({shop_id:shop_id}).then(res =>{
							
				// 			if(res.member_role_id){
				// 				uni.setStorageSync('role',res)
				// 			}
				// 		})
				// 	}
				// }
			},
			GET_OrderStatusNum(){
				Order_API.getOrderStatusNum().then(res =>{
					this.orderStatus = res
					uni.setStorageSync('orderStatus',res)
				})
			},
			navTo(route) {
			    if (!route) {
			        return;
			    }
			    if (!this.hasLogin) {
			        uni.showModal({
			            content: '你暂未登陆，是否跳转登录页面？',
			            success: (res) => {
			                if (res.confirm) {
								this.login()
			                }
			            }
			        });
			    } else {
			        uni.navigateTo({url: route})
			    }
			},
			login(){
				if(!uni.getStorageSync('isCanUse')){
					uni.navigateTo({url:'../login/login'})
				}else{
					uni.navigateTo({url: '../login/register'})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	// @import "../../colorui/animation.css";
	// image[class*="gif-"] {
	// 	border-radius: 6upx;
	// 	display: block;
	// }
/deep/page{
	background: #fff;
	height: 100vh;
}
.empty-block{
	background-color: $background-container;
	height: 20rpx;
	width: 100%;
}
.banner{
	background-image: url('../../static/img/profile_banner.png');
}
.avatar-bg{
	background-position: 100% 100%;
	background-size: cover;
	width: 210rpx;
	height: 220rpx;
	padding-top: 10rpx;

}
.avatar-bg-1{
	background-image: url('../../static/img/avatar_bg1.png');
}
.avatar-bg-2{
	background-image: url('../../static/img/avatar_bg2.png');
}
.avatar-bg-3{
	background-image: url('../../static/img/avatar_bg3.png');
}
.avatar-bg-4{
	background-image: url('../../static/img/avatar_bg4.png');
}
.avatar_img{
	width:160rpx;
	height:160rpx;
	border-radius: 80rpx;
	overflow: hidden;
}
.avatar_unlogin{
	background-image: url('../../static/img/avatar_login.png');
}
.avatar_defalut{
	background-image: url('../../static/img/avatar.png');
}
/deep/.cu-list.grid>.cu-item text {
	margin-top: 0rpx
}
/deep/.cu-bar {
	min-height: 80rpx;
}
/deep/.cu-bar .action:first-child {
	margin-left: 0;
}
/deep/.cu-bar .action:last-child {
	margin-right: 0;
}
/deep/.cu-list.menu-avatar>.cu-item:after, .cu-list.menu>.cu-item:after {
	border-bottom: 1px solid #ccc;
}
</style>
